<template>
    <div class="head bg-white">
        <div class="cont df ai-c jc-b">
            <div class="df ai-c">
                <a href="/">
                    <img src="@/assets/img/logo-shop.png" class="logo" alt="" />
                </a>
                <div class="line"></div>
                <el-popover :width="1200" trigger="hover" popper-class="popover">
                    <template #reference>
                        <div class="classify df ai-c cursor">
                            <span class="txt">全部</span>
                            <el-icon :size="14" color="#4d4d4d" class="arrow"><ArrowDown /></el-icon>
                        </div>
                    </template>
                    <template #default>
                        <div class="popoverbox">
                            <div class="block" v-for="(item,index) in menu" :key="index">
                                <div class="item active" v-for="menu in item.child" :key="menu.id">{{menu.title}}</div>
                                <template v-for="menu in item.child" :key="menu.id">
                                    <template v-if="menu.child && menu.child.length">
                                        <template v-for="submenu in menu.child" :key="submenu.id">
                                            <template v-if="submenu.child && submenu.child.length">
                                                <div class="item" v-for="subsubmenu in submenu.child" :key="subsubmenu.id">{{subsubmenu.title}}</div>
                                            </template>
                                        </template>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </template>
                </el-popover>
            </div>
            <el-form inline class="df ai-c searchbox" @submit.prevent>
                <el-form-item>
                    <input v-model="search" type="text" class="input" />
                    <button native-type="submit" @click="onSearch" class="searchbtn c-ff cursor">搜索</button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import menu from "@/assets/menu.json"

export default {
    data(){
        return {
            menu: menu,
            search: "",
        }
    },
    methods:{
        onSearch(){
            console.log(this.search);
        }
    }
}
</script>

<style scoped>
.head{height:120px;}
.cont{width:1200px; height:100%; margin:0 auto; position:relative;}
.logo{width:186px; height:auto; display:block;}
.line{height:30px; width:1px; background:#e7e6eb; margin:0 20px;}
.classify{border:1px solid #e8e9eb; padding:3px 10px; border-radius:3px;}
.classify .arrow{transition:all 0.3s; margin-left:4px;}
.classify:hover .arrow{transform:rotate(-180deg);}
.popoverbox{column-count:4; column-rule:1px dashed var(--theme); column-gap:0;}
.popoverbox .block{padding:12px 15px;}
.popoverbox .block .item{display:inline-block; line-height:26px; margin-right:10px; cursor:pointer;}
.popoverbox .block .item.active{color:var(--theme);}
.popoverbox .block .item:hover{color:var(--theme);}

.searchbox .input{width:480px; height:40px; border:2px solid var(--theme); padding:1px 10px;}
.searchbox .searchbtn{width:90px; height:40px; background:var(--theme); border:none;}
</style>